<script lang="ts" setup>
import { ref, nextTick } from "vue";

const tableData = ref<any>([
  {
    title: "营收(万)",
    mounth: "2.23",
  },
  {
    title: "订单量",
    mounth: "4.333",
  },
]);
//
const value1 = ref("");
let timee = ref<any>("");
const time = () => {
  console.log(timee.value);
};

// tag标签
import { ElInput } from "element-plus";

const inputValue = ref("");
const dynamicTags = ref(["项目店铺A", "项目店铺B", "项目店铺C"]);
const inputVisible = ref(false);
const InputRef = ref<InstanceType<typeof ElInput>>();

const handleClose = (tag: string) => {
  dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1);
};

const showInput = () => {
  inputVisible.value = true;
  nextTick(() => {
    InputRef.value!.input!.focus();
  });
};

const handleInputConfirm = () => {
  if (inputValue.value) {
    dynamicTags.value.push(inputValue.value);
  }
  inputVisible.value = false;
  inputValue.value = "";
};
</script>

<template>
  <el-space
    style="width: 100%; border-bottom: 10px solid #f6f6f6; margin-bottom: 20px"
  >
    90397897
  </el-space>
  <el-space
    style="
      margin-bottom: 20px;
      border-left: 3px solid #2a79ff;
      padding-left: 10px;
    "
  >
    <span>经营数据：</span>
    <el-button style="color: #458aff; border: 1px solid #458aff" size="small"
      >上传Excel文件解析</el-button
    >
    <el-icon style="color: #2a79ff"><Connection /></el-icon>
    <el-button type="primary" link> Excel模版下载 </el-button>
  </el-space>
  <div class="tagg">
    <el-tag
      v-for="tag in dynamicTags"
      :key="tag"
      closable
      :disable-transitions="false"
      @close="handleClose(tag)"
      style="margin-right: 10px"
    >
      {{ tag }}
    </el-tag>
    <el-input
      v-if="inputVisible"
      ref="InputRef"
      v-model="inputValue"
      class="w-20"
      size="small"
      @keyup.enter="handleInputConfirm"
      @blur="handleInputConfirm"
    />
    <el-button v-else class="button-new-tag" size="small" @click="showInput">
      + 新店铺
    </el-button>
  </div>
  <div style="background-color: white">
    <div class="box">
      <el-space
        style="display: flex; justify-content: space-around; padding: 20px 30px"
      >
        <div class="block">
          联营起止时间：
          <el-date-picker
            v-model="value1"
            type="daterange"
            range-separator="To"
            start-placeholder="Start date"
            end-placeholder="End date"
            size="small"
          />
        </div>
        <div>
          <span>毛利率:</span>
          <input
            type="text"
            style="
              width: 80px;
              height: 27px;
              border: 1px solid #ebebeb;
              outline: none;
              border-radius: 4px;
              margin: 0 8px;
            "
          />%
        </div>
        <div>
          <span>净利润率:</span>
          <input
            type="text"
            style="
              width: 80px;
              height: 27px;
              border: 1px solid #ebebeb;
              outline: none;
              border-radius: 4px;
              margin: 0 8px;
            "
          />%
        </div>
        <div>
          <span>历史数据时长:</span>
          <input
            type="text"
            style="
              width: 80px;
              height: 27px;
              border: 1px solid #ebebeb;
              outline: none;
              border-radius: 4px;
              margin: 0 8px;
            "
          />月
        </div>
        <div>
          <span>风险系数:</span>
          <input
            type="text"
            style="
              width: 80px;
              height: 27px;
              border: 1px solid #ebebeb;
              outline: none;
              border-radius: 4px;
              margin: 0 8px;
            "
          />
          <span style="margin-left: 10px">(0.1-1,越大风险越高)</span>
        </div>
      </el-space>
      <div style="padding: 0 20px">
        <el-table
          :data="tableData"
          style="width: 100%"
          :header-cell-style="{
            background: '#f5f5f6 !important',
            color: 'black',
          }"
          border
        >
          <el-table-column prop="title" label="2024年度" />
          <el-table-column prop="mounth" label="1月" />
          <el-table-column prop="mounth" label="2月" />
          <el-table-column prop="mounth" label="3月" />
          <el-table-column prop="mounth" label="4月" />
          <el-table-column prop="mounth" label="5月" />
          <el-table-column prop="mounth" label="6月" />
          <el-table-column prop="mounth" label="7月" />
          <el-table-column prop="mounth" label="8月" />
          <el-table-column prop="mounth" label="9月" />
          <el-table-column prop="mounth" label="10月" />
          <el-table-column prop="mounth" label="11月" />
          <el-table-column prop="mounth" label="12月" />
        </el-table>
        <el-table
          :data="tableData"
          stripe
          style="width: 100%"
          :header-cell-style="{
            background: '#f5f5f6 !important',
            color: 'black',
          }"
          border
        >
          <el-table-column prop="title" label="2024年度" />
          <el-table-column prop="mounth" label="1月" />
          <el-table-column prop="mounth" label="2月" />
          <el-table-column prop="mounth" label="3月" />
          <el-table-column prop="mounth" label="4月" />
          <el-table-column prop="mounth" label="5月" />
          <el-table-column prop="mounth" label="6月" />
          <el-table-column prop="mounth" label="7月" />
          <el-table-column prop="mounth" label="8月" />
          <el-table-column prop="mounth" label="9月" />
          <el-table-column prop="mounth" label="10月" />
          <el-table-column prop="mounth" label="11月" />
          <el-table-column prop="mounth" label="12月" />
        </el-table>
        <el-table
          :data="tableData"
          stripe
          style="width: 100%"
          :header-cell-style="{
            background: '#f5f5f6 !important',
            color: 'black',
          }"
          border
        >
          <el-table-column prop="title" label="2024年度" />
          <el-table-column prop="mounth" label="1月" />
          <el-table-column prop="mounth" label="2月" />
          <el-table-column prop="mounth" label="3月" />
          <el-table-column prop="mounth" label="4月" />
          <el-table-column prop="mounth" label="5月" />
          <el-table-column prop="mounth" label="6月" />
          <el-table-column prop="mounth" label="7月" />
          <el-table-column prop="mounth" label="8月" />
          <el-table-column prop="mounth" label="9月" />
          <el-table-column prop="mounth" label="10月" />
          <el-table-column prop="mounth" label="11月" />
          <el-table-column prop="mounth" label="12月" />
        </el-table>
      </div>

      <div style="margin-top: 10px; margin-left: 20px">
        <el-button
          style="color: #458aff; border: 1px solid #458aff"
          size="small"
          >新增一年</el-button
        >
        <el-button
          style="color: #ec8793; border: 1px solid #ec8793"
          size="small"
          >删除一年</el-button
        >
      </div>
    </div>
    <div style="text-align: center; margin-top: 20px">
      <el-button type="primary" size="small"
        >更新结果</el-button
      >
    </div>
  </div>
</template>

<style lang="less" scoped>
.box {
  width: 98%;
  background-color: #f2f2f2;
  border-radius: 5px;
  margin-top: 20px;
  box-sizing: border-box;
  margin-left: 20px;
  padding: 40px 0;
  span {
    color: #666;
    font-size: 14px;
  }
}
.tagg {
  margin-top: 20px;
  margin-left: 20px;
}
</style>
